<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.collect {
		background-color: $main-bgc-gray;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: absolute;
		overflow:hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.total{
			padding: 1.6rem;
			color: $color2;
		}
		.info{
			position: absolute;
			top: 54px;
			left: 0;
			right: 0;
			padding: 10px 12px;
		}
		.list{
			position: absolute;
			top: 90px;
			width: 100%;
			bottom: 0;
			overflow-y: scroll;
			box-sizing: border-box;
			padding: 0 1rem 1rem 1rem;
			$paddingSize:0.8rem;
			.item{
				padding-top: $paddingSize;
				background-color: white;
				margin-bottom: 1rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 0.8rem;
				.line1{
					display: flex;
					align-items: center;
					padding: 0 $paddingSize;
					padding-bottom: $paddingSize;
					.imgBox{
						flex: 0 0 8.6rem;
						border-radius: 0.6rem;
						overflow: hidden;
					}
					.content{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						margin-left: 0.6rem;
						height: 5.2rem;
						.title {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 设置行数 */
							-webkit-box-orient: vertical;
							color: $color0;
							font-size: 1.6rem;
							line-height: 1.2em;
						}
						.desc {
							span {
								color: $color2;
								line-height: 1.2em;
								&.split {
									font-size: 1rem;
								}
							}
						}
					}
				}
				.line2{
					&.title{
						color:$color2;
						padding: $paddingSize;
						line-height: 1.3em;
						font-size: 1.3rem;
					}
				}
				.line3{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color:$color2;
					border-top: 1px solid $border-c;
					padding: $paddingSize;
				}
			}
		}
	}
	.van-tabs {
	    height: 100% !important;
	}
</style>
<template>
	<div class="collect">
		<van-tabs v-model="active" @click="onClickTabs" sticky  line-width="100" title-active-color="#335FFC" color="#335FFC">
			<van-tab title="课程" name="0">
			    <div class="info">共{{load[active].totalCount}}门课程</div>
				<div class="list" v-if="list[active].length>0">
					<van-list v-model="load[active].loading" :finished="load[active].finished" finished-text="没有更多了" offset="100" @load="CollectH5Pages">
						<div class="item" v-for="(item,index) in list[active]" :key="index" @click="toDetailView(item.course)">
							<div class="line1">
								<div class="imgBox">
									<van-image width="8.6rem" height="5.2rem" fit="cover" :src="item.course.images" />
								</div>
								<div class="content">
									<div class="title">{{item.course.name}}</div>
									<div class="desc">
										<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
										<span class="split margL-m">|</span>
										<span class="margL-m">{{item.course.university}}</span>
									</div>
								</div>
							</div>
							<div class="line3">
								<span>查看详情</span>
								<van-icon name="arrow" class="icon" color="#999" size="1.6rem"/>
							</div>
						</div>
					</van-list>
				</div>
			</van-tab>
			<van-tab title="资讯" name="1">
				<div class="info">共{{load[active].totalCount}}篇文章</div>
				<div class="list">
					<van-list v-model="load[active].loading" :finished="load[active].finished" finished-text="没有更多了" offset="100">
					  <zixun-list :list="list[active]" v-if="list[active].length>0">></zixun-list>
					</van-list>
				</div>
			</van-tab>
		  </van-tabs>			
		<div class="tabbar-height"></div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import ZixunList from '@/components/zixunList.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			ZixunList
		},
		data() {
			return {
				active: 0,
				mainColor: "#FF0000",
				tabList: [{
					id: 0,
					name: "课程",
				}, {
					id: 1,
					name: "资讯"
				}],
				list:[[],[]],
				courseList: [],
				zixunList:[],
				courseData: '',
				loading: false,
				finished: false,
				pageSize: 6,
				load:[{
					loading: false,
					finished: false,
					pageNo: 1,
				},{
					loading: false,
					finished: false,
					pageNo: 1,
				}],
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			// document.title = '活动管理'
			this.courseList = this.$store.state.courseList
			this.zixunList = this.$store.state.zixunList
			this.CollectH5Pages(1)
			// this.CollectH5Pages()
		},
		methods: {
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				console.log("this.active", this.active)
				this.load[this.active].pageNo=1
				console.log('this.load[this.active].pageNo',this.load[this.active].pageNo)
				this.load[this.active].finished = false
				this.list[this.active] = []
				if(index == 0){
					this.CollectH5Pages(1)
				}else if(index == 1){
					this.CollectH5Pages(2)
					// 获取收藏资讯接口
					
				}
			},
			CollectH5Pages(status) {
				const _this = this;
				let params = {
					status: status||1,
					campus_id: JSON.parse(localStorage.getItem('selectedCampus')).id,
					openid: this.$store.state.openid || localStorage.getItem('openid'),
					pageNo: _this.load[_this.active].pageNo,
					pageSize: _this.pageSize
				}
				_this.$request.CollectH5Pages(params).then(res => {
					let data = res.data.data
					_this.load[_this.active].totalCount = res.data.totalCount
					let list = _this.list[_this.active]
					list.push(...data)
					_this.list[_this.active] = list
					console.log("_this.list",_this.list)
					console.log('_this.active',_this.active)
					console.log('_this.load[_this.active].pageNo',_this.load[_this.active].pageNo)
					console.log('(Math.ceil(res.data.totalCount / _this.pageSize))',(Math.ceil(res.data.totalCount / _this.pageSize)))
					if (_this.load[_this.active].pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.load[_this.active].finished = true;
					} else {
						_this.load[_this.active].pageNo++
						console.log("pageNo++",_this.load[_this.active].pageNo)
					}
					_this.$forceUpdate()
				}).finally(() => {
					console.log('finally')
					_this.load[_this.active].loading = false
				})
			},
		}
	};
</script>
